<style lang="scss" scoped>
.certification-main-top {
  background-color: #fff;
  margin: 10px;
}
.certification-main-title {
  padding: 10px;
  font-weight: 600;
  font-size: 15px;
}
.certification-main-upload {
  display: flex;
}
.certification-main-upload-left {
  width: 50%;
  height: 130px;
  background: url("../../../../common/images/card.png") no-repeat;
  background-size: 100%;
  margin: 10px;
}
.certification-main-upload-right {
  width: 50%;
  height: 115px;
  background-color: #ececec;
  margin: 10px;
}
.certification-main-bottom {
  margin: 10px;
  background-color: #fff;
}
.certification-main-bottom /deep/ .u-cell-item__title {
  margin-top: 9px;
  text-align: center;
}
.certification-steps {
  margin: 10px;
}
.certification-steps /deep/ .van-steps {
  border-radius: 10px;
}
.certification-main-upload-left-btn {
  height: 100px;
  width: 155px;
}
.certification-main-bottom /deep/ .button--default {
  border: 1px solid #fff;
  color: $themeColor;
}

.certification-main-bottom-radio {
  padding: 10px 16px;
}
.certification-main-bottom-radio-item1 {
  margin: 10px 10px 0 35px;
}
.certification-main-bottom-radio-item2 {
  margin: 10px 0px 0 10px;
}
.cust-upload-input /deep/ .van-uploader__input {
  width: 40px;
  height: 40px;
}
</style>
<template>
  <div :style="'height:' + docmHeight + 'px'">
    
    <div class="certification-main">
      <div class="certification-main-bottom agent-info-list-cell">
        <!-- <u-field
		   label="公司信息"
		   value=""
		   value="(显示在邀请推广码的名字)"
		   style="font-weight: 600;font-size: .34rem"
		   :border="false"
		   readonly
		   class="agent-info-list-cell"
		 /> -->
        <div
          style="
            height: 1rem;
            line-height: 1rem;
            font-weight: 900;
            color: #646566;
            font-size: 0.32rem;
            margin-left: 0.6rem;
          "
        >
          推客信息
          <span style="font-size: 0.24rem; color: #888"
            >( 显示在邀请推广码的名字 )</span
          >
        </div>
        <u-field
          v-model="costomData.legalName"
          label="本人昵称:"
          placeholder=" 请输入本人昵称"
          clearable
        />
      </div>
    </div>
    <div class="certification-main">
      <!--			<div class="certification-main-top agent-info-list-cell">-->
      <!--				<div class="certification-main-title">上传身份证照片</div>-->
      <!--				<div class="certification-main-upload">-->
      <!--					<div class="certification-main-upload-left agent-info-list-cell" @click="handleAlbum">-->
      <!--						<input type="file" accept="image/png, image/jpeg" class="certification-main-upload-left-btn"/>-->
      <!--						<van-uploader :after-read="afterRead" accept="image/png, image/jpeg" >-->
      <!--							<div class="certification-main-upload-left-btn"></div>-->
      <!--						</van-uploader>-->
      <!--					</div>-->
      <!--					<div class="certification-main-upload-right agent-info-list-cell" @click="photo">-->
      <!--						<img v-if="cardImg" width="100%" height="100%" :src="cardImg">-->
      <!--					</div>-->

      <!--				</div>-->
      <!--			</div>-->
      <!-- .u-field__control -->
      <div class="certification-main-bottom agent-info-list-cell">
        <!--  <u-field
          label="个人信息"
		  value=""
		  placeholder=""
          style="font-weight: 600;font-size: .35rem"
          :border="false"
          readonly
          class="agent-info-list-cell"
        /> -->
        <div
          style="
            height: 1rem;
            line-height: 1rem;
            font-weight: 900;
            color: #646566;
            font-size: 0.32rem;
            margin-left: 0.6rem;
          "
        >
          个人信息
          <span style="font-size: 0.24rem; color: #888"
            >( 用于账户提现,请填写真实信息 )</span
          >
        </div>
        <u-field
          v-model="costomData.accountName"
          label="姓名:"
          placeholder="请输入真实姓名"
          clearable
        />
        <u-field
          v-model="costomData.identityCard"
          :value="showCerdNo"
          label="身份证:"
          placeholder="请输入身份证号码"
          clearable
        />

        <!--				<u-field :value="costomData.province + costomData.city + costomData.region" @click="popupShow = true" label="所在区域:" placeholder="请选择所在省市区" clickable readonly right-icon="arrow" />-->
        <!--				<u-field v-model="costomData.address" label="详细地址:" placeholder="请输入详细地址" clearable class="agent-info-list-cell" />-->
      </div>
    </div>

    <div class="certification-main" v-if="active === 1">
      <!--			<div class="certification-main-bottom agent-info-list-cell">-->
      <!--				<u-field v-model="costomData.legalName" readonly label="姓名:" placeholder="请输入真实姓名" class="agent-info-list-cell" clearable />-->
      <!--				<u-field v-model="costomData.identityCard" readonly :value="showCerdNo" label="身份证:" placeholder="请输入身份证号码"  class="agent-info-list-cell" clearable />-->
      <!--			</div>-->

      <div class="certification-main-bottom agent-info-list-cell">
        <!-- <u-field
          label="结算卡信息 "
          style="font-weight: 600;font-size: .34rem"
          :border="false"
		  value=""
		  placeholder=" (用于账户提现,请填写真实信息)"
          readonly
          class="agent-info-list-cell"
        /> -->
        <div
          style="
            height: 1rem;
            line-height: 1rem;
            font-weight: 900;
            color: #646566;
            font-size: 0.32rem;
            margin-left: 0.6rem;
          "
        >
          结算卡信息
          <span style="font-size: 0.24rem; color: #888"
            >( 用于账户提现,请填写真实信息 )</span
          >
        </div>
        <!--				<van-radio-group v-model="costomData.accountType" class="certification-main-bottom-radio" direction="horizontal">-->
        <!--					<van-radio :name="1" class="certification-main-bottom-radio-item1">对私</van-radio>-->
        <!--					<van-radio :name="2" class="certification-main-bottom-radio-item2">对公</van-radio>-->
        <!--				</van-radio-group>-->

        <u-field
          v-model="costomData.accountno"
          @input="bankChange"
          :value="showCardNo"
          label="银行卡号:"
          placeholder="请输入卡号"
          clearable
        >
          <template #right-icon>
            <van-uploader
              :after-read="afterRead"
              accept="image/png, image/jpeg"
              capture="camera"
              class="cust-upload-input"
              @click.native="photo"
            >
              <i class="iconfont icon-saoma"></i>
            </van-uploader>
          </template>
        </u-field>

        <!--				<u-field v-model="costomData.bankProvince" label="开户省份:"  @click="proPopupShow = true" placeholder="请选择省份" clickable readonly right-icon="arrow" />-->
        <!--				<u-field v-model="costomData.bankArea" label="开户地区:" @click="cityPopupShow = true" placeholder="请先选择省份" clickable readonly right-icon="arrow" />-->
        <!-- @click="bankTypePopupShow = true" -->
        <u-field
          v-model="bankCardType"
          label="银行行别:"
          placeholder="请选择银行行别"
          clickable
        />
        <!--				<u-field v-model="costomData.bankName" label="开户银行:" @click="bankPopupShow = true" placeholder="请选择开户银行" clickable readonly right-icon="arrow" />-->
        <u-field
          v-model="costomData.mobile"
          label="手机号:"
          placeholder="请输入银行预留手机号"
          clearable
        />

        <u-field
          v-model="costomData.smsCode"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          class="agent-info-list-cell"
        >
          <template #button>
            <button
              size="small"
              type="default"
              :disabled="sms.disabled"
              @click="sendSmsCode"
              class="btn-text-font15"
              >{{ sms.smsTitle }}</button
            >
          </template>
        </u-field>
      </div>
    </div>

    <u-popup v-model="popupShow" position="bottom">
      <van-area
        title="请选择省市区"
        :area-list="areaList"
        @confirm="areaConfirm"
        @cancel="popupShow = false"
      />
    </u-popup>

    <!-- <u-popup v-model="proPopupShow" position="bottom">
      <u-picker
        title="请选择开户省份"
        show-toolbar
        :columns="proColumns"
        @confirm="proConfirmHandle"
        @cancel="proPopupShow = false"
      />
    </u-popup> -->

    <u-popup v-model="cityPopupShow" position="bottom">
      <u-picker
        title="请选择开户地区"
        show-toolbar
        value-key="city"
        :columns="cityColumns"
        @confirm="cityBankHandle"
        @cancel="cityPopupShow = false"
      />
    </u-popup>

    <!--		<u-popup v-model="bankTypePopupShow" position="bottom">-->
    <!--			<u-picker title="请选择开户地区" show-toolbar value-key="bankName" :columns="bankTypeColumns" @confirm="typeBankHandle" @cancel="cityPopupShow = false" />-->
    <!--		</u-popup>-->

    <u-popup v-model="bankPopupShow" position="bottom">
      <u-picker
        title="请选择开户银行"
        show-toolbar
        value-key="bankName"
        :columns="bankColumns"
        @confirm="selectBankHandle"
        @cancel="cityPopupShow = false"
      />
    </u-popup>

    <div class="btn-bottom1">
      <div class="btn-bottom-bar">
        <!--				<button v-if="active === 1" round size="large" @click="active = 0">上一步</button>-->
        <button round size="large" type="info" @click="nextHandle">{{
          active === 0 ? "下一步" : "完成"
        }}</button>
      </div>
    </div>
  </div>
</template>

<script>

import areaList from "_c/utils/area";
import { bankCardAttribution } from "_c/utils/bankCardAttribution";
import { IsCard, regBank, validatename, isMobile } from "_c/utils/validate";
import { sendVerifyCode } from "_a/sms";
import { image2base64, getLocation } from "_c/utils/guofu";
import {
  upload,
  getCitys,
  getBankType,
  getBankList,
  inviteAgent2,
  inviteAgent3,
  getAgentInfo,
  imageTextRecognize,
} from "_a/certification";

export default {
  name: "Certification",
  
  data() {
    return {
      navBarOptions: {
        title: "资料完善",
        router: { name: "home" },
      },
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      active: 1,
      areaList: areaList,
      popupShow: false,
      cardImg: "",
      sms: {
        smsTitle: "获取验证码",
        smsNum: 59,
        disabled: false,
        time: null,
      },
      bankCardType: "",
      costomData: {
        legalName: "",
        companyName: "",
        identityCard: "", //身份证
        mobile: "", //手机号
        province: "",
        city: "",
        region: "",
        address: "",
        areaCode: "",
        identityCardImg: "",
        accountType: 1,
        accountno: "", //银行卡号
        accountName: "", //真实姓名
        bankno: "",
        bankType: "", //银行卡行别
        bankName: "",
        smsCode: "", //验证码
      },
      showCerdNo: "",
      showCardNo: "",
      proPopupShow: false,
      proColumns: [
        "广东省",
        "安徽省",
        "北京市",
        "福建省",
        "甘肃省",
        "广西",
        "贵州省",
        "海南省",
        "河南省",
        "河北省",
        "黑龙江省",
        "湖北省",
        "湖南省",
        "吉林省",
        "江苏省",
        "江西省",
        "辽宁省",
        "内蒙古",
        "宁夏",
        "青海省",
        "山东省",
        "山西省",
        "陕西省",
        "上海市",
        "四川省",
        "天津市",
        "西藏",
        "新疆",
        "云南省",
        "浙江省",
        "重庆市",
      ],
      cityPopupShow: false,
      cityColumns: [],
      bankTypePopupShow: false,
      bankTypeColumns: [],
      bankPopupShow: false,
      bankColumns: [],
    };
  },
  mounted() {},
  created() {
    // window.androidPhoto = this.androidPhoto; // 方法赋值给window
    if (this.docmHeight < 700) {
      this.docmHeight = this.docmHeight + 250;
    } else {
      this.docmHeight = this.docmHeight + 100;
    }
    getLocation((res) => {
      console.log("res", res);
      this.costomData.province = res.province;
      // this.costomData.province == null
      //   ? res.province
      //   : this.costomData.province;
      this.costomData.city = res.city;
      // this.costomData.city == null ? res.city : this.costomData.city;
      this.costomData.region = res.area;
      // this.costomData.region == null ? res.area : this.costomData.region;
      this.costomData.areaCode = res.areaCode;
      this.costomData.address = res.address
        .replace(res.province, "")
        .replace(res.city, "")
        .replace(res.area, "");
      this.costomData.lng = res.position.lng;
      this.costomData.lat = res.position.lat;
    });

    // this.initBankType()

    this.initInfo();
  },
  methods: {
    androidPhoto(base64) {
      console.log("base", base64);
      let data = {
        image: base64,
      };
      this.$tip.toast( this.active === 0 ? "身份证识别中..." : "银行卡识别中...")

      // this.$toast({
      //   duration: 5000,
      //   message:,
      //   forbidClick: true,
      // });
      this.cartRecognizeHandle(data);
    },
    areaConfirm(value) {
      this.costomData.province = value[0].name;
      this.costomData.city = value[1].name;
      this.costomData.region = value[2].name;
      this.popupShow = false;
    },
    afterRead(file) {
      this.$toast({
        duration: 0,
        message: this.active === 0 ? "身份证识别中..." : "银行卡识别中...",
        forbidClick: true,
      });
      upload(file.file, this.active === 0 ? 1 : 2).then((res) => {
        if (res.code === 200) {
          image2base64(file, true, 600, (data) => {
            if (data.code == 1) {
              if (this.active === 0) {
                this.costomData.identityCardImg = res.data;
                this.certRecognizeHandle(data);
              } else {
                this.cartRecognizeHandle(data);
              }
            } else {
              this.$tip.toast(data.message)
            }
          });
        }
      });
    },
    certRecognizeHandle(data) {
      /** 身份认证识别 **/
      imageTextRecognize({
        type: "cert",
        certType: "front",
        base64Image: data.image,
      }).then((res) => {
        if (res.code === 200) {
          const words_result = res.data.words_result;
          this.cardImg = "data:image/jpeg;base64," + data.image;
          const certno = words_result.公民身份号码.words;
          this.costomData.identityCard = certno;
          this.showCerdNo =
            certno.substring(0, 6) +
            " **** **** **** " +
            certno.substring(certno.length - 4, certno.length);
          this.costomData.legalName = words_result.姓名.words;
        }
        this.$toast({
          duration: 1000,
          message: res.code === 200 ? "识别成功" : "识别失败," + res.message,
        });
      });
    },
    cartRecognizeHandle(data) {
      /** 银行卡识别 **/
      imageTextRecognize({ type: "cart", base64Image: data.image }).then(
        (res) => {
          if (res.code === 200) {
            const cardno = res.data.result.bank_card_number;
            this.costomData.accountno = cardno.replace(/\s+/g, "");
            this.bankChange();
            this.showCardNo =
              cardno.substring(0, 4) +
              " **** **** **** " +
              cardno.substring(cardno.length - 4, cardno.length);
          }
          
          this.$toast({
            duration: 1000,
            message: res.code === 200 ? "识别成功" : "识别失败," + res.message,
          });
        }
      );
    },
    nextHandle() {
      let message = "";
      // if (this.active === 1) {
      /** 完成 **/
      if (!this.costomData.smsCode) {
        message = "请输入短信验证码";
      }
      if (!this.costomData.mobile) {
        message = "请输入手机号";
      }
      // if (!this.costomData.bankName) {
      // 	message = '请选择开户银行'
      // }
      this.costomData.bankType = this.bankCardType;
      this.costomData.bankName = this.bankCardType;
      console.log("this.costomData", this.costomData);
      if (!this.costomData.bankType) {
        message = "请选择银行行别";
      }
      // if (!this.costomData.bankArea) {
      // 	message = '请选择开户地区'
      // }
      // if (!this.costomData.bankProvince) {
      // 	message = '请选择省份'
      // }
      if (!this.costomData.accountno) {
        message = "请输入卡号";
      }
      if (message) {
        this.$tip.toast(message)
        return false;
      }

      // this.costomData.accountName = this.costomData.legalName
      //
      // inviteAgent3(this.costomData).then(res => {
      // 	if (res.code === 200) {
      // 		this.$nav.push({path : 'home'})
      // 	}
      // })

      // } else {
      /** 下一步 **/
      // if (!this.costomData.address) {
      // 	message = '请输入详细地址'
      // }
      // if (!this.costomData.city) {
      // 	message = '请选择所在区域'
      // }
      // if (!this.costomData.province) {
      // 	message = '请选择所在区域'
      // }
      if (!this.costomData.identityCard) {
        message = "请输入身份证号码";
      }
      if (!this.costomData.accountName) {
        message = "请输入真实姓名";
      }
      if (!this.costomData.legalName) {
        message = "请输入推客名称";
      }
      if (isMobile(this.costomData.mobile)) {
        message = "手机号格式错误";
      }

      if (!regBank(this.costomData.accountno)) {
        // console.log('this.cardid(this.costomData.identityCard).length',cardid(this.costomData.identityCard))
        message = "银行卡格式错误";
      }
      if (!IsCard(this.costomData.identityCard)) {
        // console.log('this.cardid(this.costomData.identityCard).length',cardid(this.costomData.identityCard))
        message = "身份证格式错误";
      }
      if (!validatename(this.costomData.accountName)) {
        message = "姓名输入错误，请输入二至四个汉字";
      }
      if (message) {
        this.$toast({
          duration: 1000,
          message: message,
        });
        return false;
      }
      const toast = this.$toast.loading({
        message: "信息提交中...",
        duration: 0,
        forbidClick: true,
      });
      inviteAgent2(this.costomData).then((res) => {
        if (res.code === 200) {
          // this.costomData.accountName = this.costomData.legalName;
          toast.clear();
          this.$nav.push({ path: "home" });
          //       inviteAgent3(this.costomData).then((res) => {

          //         if (res.code === 200) {

          //         }
          //       });
        }
      });

      // }
    },
    sendSmsCode() {
      if (this.costomData.mobile) {
        this.sms.disabled = true;
        /** 发送短信 **/
        sendVerifyCode(this.costomData.mobile)
          .then((res) => {
            if (res.code === 200) {
              this.sms.smsTitle = this.sms.smsNum + "s";
              this.smsCountdown();
            }
          })
          .catch((err) => {
            this.sms.disabled = false;
            this.sms.smsNum = 59;
            this.sms.smsTitle = "重新发送";
          });
      } else {
        this.$tip.toast(message)
      }
    },
    smsCountdown() {
      /** 短信倒计时 **/
      const timeFunction = () => {
        this.sms.smsNum--;
        this.sms.smsTitle = this.sms.smsNum + "秒";
        /** 当时间差小于等于0时,停止倒计时 **/
        if (this.sms.smsNum <= 0) {
          this.sms.smsTitle = "重新发送";
          this.sms.disabled = false;
          this.sms.smsNum = 59;
          clearInterval(this.sms.time);
        }
      };
      /** 每一秒执行一次 **/
      const go = setInterval(() => {
        timeFunction();
      }, 1000);
      this.sms.time = go;
    },
    proConfirmHandle(value) {
      this.costomData.bankProvince = value;
      getCitys(value).then((res) => {
        if (res.code === 200 && res.data) {
          this.cityColumns = res.data;
        }
      });
      this.proPopupShow = false;
    },
    initBankType() {
      /** 初始化银行行别 **/
      getBankType().then((res) => {
        if (res.code === 200 && res.data) {
          this.bankTypeColumns = res.data;
        }
      });
    },
    queryBankHandle() {
      /** 查询开户银行 **/
      if (this.costomData.bankno && this.costomData.bankArea) {
        getBankList({
          bankno: this.costomData.bankno,
          areaCode: this.costomData.bankAreaCode,
        }).then((res) => {
          if (res.code === 200 && res.data) {
            this.bankColumns = res.data;
          }
        });
      }
    },
    selectBankHandle(value) {
      /** 选择开户银行 **/
      if (value) {
        this.costomData.bankName = value.bankName;
        this.costomData.areaCode = value.areaCode;
        this.costomData.bankCode = value.bankCode;
      }
      this.bankPopupShow = false;
    },
    cityBankHandle(value) {
      /** 选择开户地区 **/
      if (value) {
        this.costomData.bankArea = value.city;
        this.costomData.bankAreaCode = value.areaCode;
        this.queryBankHandle();
      }
      this.cityPopupShow = false;
    },
    typeBankHandle(value) {
      /** 选择银行行别 **/
      if (value) {
        this.costomData.bankType = value.bankName;
        this.costomData.bankno = value.bankno;
        this.queryBankHandle();
      }
      this.bankTypePopupShow = false;
    },
    initInfo() {
      getAgentInfo().then((res) => {
        if (res.code === 200 && res.data) {
          this.costomData = res.data;
          this.costomData.province =
            res.data.province == null ? "" : res.data.province;
          this.costomData.city = res.data.city == null ? "" : res.data.city;
          this.costomData.region =
            res.data.region == null ? "" : res.data.region;
        }
      });
    },
    bankChange() {
      const res = bankCardAttribution(this.costomData.accountno);
      if (res != "error" && res.bankName) {
        this.costomData.bankName = res.bankName;
        this.costomData.bankType = res.bankName;
        this.bankCardType = res.bankName;
        this.$forceUpdate();
      }
    },
    photo() {
      const userAgent = navigator.userAgent.toLowerCase(); //获取UA信息
      /** 调起安卓拍照 **/

      if (this.$phoneAgent == "andriod") {
        /** 在安卓内 **/
        // console.log('window',window, window.androidPhoto,window.androidPhoto())
        this.$bridge.callhandler("album", {}, (data) => {
          this.showCardNo = data;
          console.log("原生端图片base64返回", data);
        });
      } else if (this.$phoneAgent == "ios") {
        // this.$bridgeIos.album({}, (data)=>{
        // 	this.showCardNo = data
        // })
      }
    },
  },
};
</script>
